<!DOCTYPE html>
<html>
<head>
    <title>Retaining Wall Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="500"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.font = 'bold 24px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        // Wall dimensions and position
        const wallThickness = 120;
        const wallHeight = 320;
        const wallX = 140;
        const wallY = 90;

        // --- Draw Hatched Ground (A) ---
        function drawHatching(x1, y1, x2, y2, isVertical) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();

            const hatchLength = 15;
            const hatchSpacing = 10;
            
            if (isVertical) { // Hatching for the right wall
                const length = y2 - y1;
                const numHatches = Math.floor(length / hatchSpacing);
                for (let i = 0; i <= numHatches; i++) {
                    const y = y1 + i * hatchSpacing;
                    ctx.beginPath();
                    ctx.moveTo(x1, y);
                    ctx.lineTo(x1 + hatchLength, y + hatchLength);
                    ctx.stroke();
                }
            } else { // Hatching for the ground
                const length = x2 - x1;
                const numHatches = Math.floor(length / hatchSpacing);
                 for (let i = 0; i <= numHatches; i++) {
                    const x = x1 + i * hatchSpacing;
                    ctx.beginPath();
                    ctx.moveTo(x, y1);
                    ctx.lineTo(x - hatchLength, y1 + hatchLength);
                    ctx.stroke();
                }
            }
        }
        
        // Ground line and hatching
        const groundY = wallY + wallHeight;
        const groundStartX = wallX - 40;
        drawHatching(groundStartX, groundY, wallX, groundY, false);
        
        // Right support line and hatching
        const supportX = wallX + wallThickness;
        drawHatching(supportX, wallY, supportX, groundY, true);


        // --- Draw the Wall Outline ---
        ctx.beginPath();
        ctx.rect(wallX, wallY, wallThickness, wallHeight);
        ctx.stroke();

        // --- Draw the Brick Pattern ---
        const numRows = 16;
        const rowHeight = wallHeight / numRows;

        // Draw horizontal mortar joints
        for (let i = 1; i < numRows; i++) {
            const y = wallY + i * rowHeight;
            ctx.beginPath();
            ctx.moveTo(wallX, y);
            ctx.lineTo(wallX + wallThickness, y);
            ctx.stroke();
        }

        // Draw vertical mortar joints (staggered pattern)
        for (let i = 0; i < numRows; i++) {
            const yStart = wallY + i * rowHeight;
            const yEnd = yStart + rowHeight;
            let xJoint;

            if (i % 3 === 0) {
                 xJoint = wallX + wallThickness * 0.75;
            } else if (i % 3 === 1) {
                 xJoint = wallX + wallThickness * 0.25;
            } else {
                 xJoint = wallX + wallThickness * 0.5;
            }
            
            // Draw main vertical joint
            ctx.beginPath();
            ctx.moveTo(xJoint, yStart);
            ctx.lineTo(xJoint, yEnd);
            ctx.stroke();

            // Add smaller joints to simulate a more complex bond from the drawing
            if (i % 3 === 1) {
                const xJoint2 = wallX + wallThickness * 0.8;
                ctx.beginPath();
                ctx.moveTo(xJoint2, yStart);
                ctx.lineTo(xJoint2, yEnd);
                ctx.stroke();
            }
        }
        
        // --- Draw Dimension Line 'a' ---
        function drawArrow(x1, y1, x2, y2) {
            const headlen = 10; // length of head in pixels
            const dx = x2 - x1;
            const dy = y2 - y1;
            const angle = Math.atan2(dy, dx);
            
            // Main line
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();

            // Arrow head at start
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x1 + headlen * Math.cos(angle + Math.PI - Math.PI / 6), y1 + headlen * Math.sin(angle + Math.PI - Math.PI / 6));
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x1 + headlen * Math.cos(angle + Math.PI + Math.PI / 6), y1 + headlen * Math.sin(angle + Math.PI + Math.PI / 6));
            ctx.stroke();
            
            // Arrow head at end
            ctx.beginPath();
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        const dimY = wallY - 30;
        const extHeight = 20;

        // Extension lines
        ctx.beginPath();
        ctx.moveTo(wallX, wallY);
        ctx.lineTo(wallX, wallY - extHeight);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(wallX + wallThickness, wallY);
        ctx.lineTo(wallX + wallThickness, wallY - extHeight);
        ctx.stroke();
        
        // Arrow line
        drawArrow(wallX, wallY - extHeight, wallX + wallThickness, wallY - extHeight);

        // Label 'a'
        ctx.font = 'italic bold 22px serif';
        ctx.fillText('a', wallX + wallThickness / 2, wallY - extHeight - 5);


        // --- Draw Labels 'A' and 'B' ---
        ctx.font = 'bold 28px serif';
        // Label 'A'
        ctx.textAlign = 'center';
        ctx.fillText('A', groundStartX + 20, groundY - 5);
        
        // Label 'B'
        ctx.textAlign = 'left';
        ctx.fillText('B', wallX + wallThickness + 8, wallY + 15);
        
    </script>
</body>
</html>